<template>
  <div>
    <nav-bar :title="title"></nav-bar>

    <van-cell-group title="员工授权信息">
      <van-cell title="授权商家" :value="employee.retailer_name"></van-cell>
      <van-cell title="姓名" :value="employee.name"></van-cell>
      <van-cell title="电话" :value="employee.telephone"></van-cell>
      <van-cell title="角色" :value="employee.role_name"></van-cell>
      <van-cell title="分店" :value="employee.branch"></van-cell>
      <van-cell title="开始时间" :value="employee.begin_date"></van-cell>
      <van-cell title="结束时间" :value="employee.end_date"></van-cell>
      <van-cell title="授权状态" :value="employee.confirm_name"></van-cell>
    </van-cell-group>
    <div style="margin: 32px">
      <van-button round block type="primary" @click="goHome">返回</van-button>
    </div>
  </div>
</template>

<script>
// import { mapGetters } from "vuex";
import NavBar from "@/components/NavBar";
import { getEmployeeById } from "@/api/member";

export default {
  name: "EmployeeInfo",
  components: {
    NavBar,
  },
  // computed: {
  //   ...mapGetters(["retailer_name"]),
  // },
  props: ["employee_id"],
  data() {
    return {
      title: this.$route.meta.title,
      employee: {},
    };
  },
  mounted() {
    console.log(this.employee_id);
    this.getEmployeeInfo();
  },
  methods: {
    goHome() {
      this.$router.push({ name: "Card" });
    },
    getEmployeeInfo() {
      getEmployeeById(this.employee_id)
        .then((res) => {
          this.employee = res.data;
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>

<style  scoped>
.img_outer {
  margin: 20px;
  margin-top: 5px;
  display: flex;
  justify-content: center;
}
.title {
  text-align: center;
  margin: 0;
}
.points {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  background-color: #f2f3f5;
}
.van-field__label {
  color: black;
}
.van-col {
  margin: 5px;
  padding: 0px;
}
</style>